<template>
  <div class="timeRecording" :style="{ height: isProject ? '75vh' : '85vh' }">
    <div class="leftSearch" :style="{ height: isProject ? '75vh' : '85vh' }">
      <div
        style="
          font-size: 14px;
          color: #666;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          cursor: pointer;
        "
      >
        <span @click="handleGoBack('1')">
          <i class="el-icon-back"></i>
          <span style="margin-left: 6px">返回统计</span>
        </span>
      </div>
      <el-form label-position="top" label-width="120px">
        <el-form-item label="时间筛选">
          <el-select
            v-model="form.timeType"
            placeholder="请选择"
            style="width: 100%"
            filterable
            size="small"
          >
            <el-option label="昨天" value="1"> </el-option>
            <el-option label="今天" value="2"> </el-option>
            <el-option label="七天内" value="3"> </el-option>
            <el-option label="自定义时间" value="4"> </el-option>
          </el-select>
          <el-date-picker
            v-if="form.timeType === '4'"
            v-model="form.time2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%; margin-top: 12px"
            size="small"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="人员筛选">
          <el-select
            v-model="form.admin"
            multiple
            collapse-tags
            placeholder="请选择"
            style="width: 100%"
            filterable
            size="small"
          >
            <el-option
              v-for="item in list"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="rightChart" :style="{ height: isProject ? '75vh' : '85vh' }">
      <div class="row">
        <div class="chart">
          <div class="title">工时统计</div>
          <div id="timeChartRef" class="timeChartRef"></div>
        </div>
      </div>
      <div class="row" style="margin-top: 20px; padding-bottom: 30px">
        <div class="table">
          <div class="title">工时详情表</div>
          <div style="padding: 10px">
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column prop="name" label="姓名" align="center">
              </el-table-column>
              <el-table-column prop="date" label="计划工时" align="center">
              </el-table-column>
              <el-table-column prop="address" label="实际工时" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { listUser } from "@/api/system/user.js";
export default {
  mixins: [resize],
  props: {
    type: {
      type: String,
      default: "1",
    },
    chartData: {
      type: Array,
      default: () => [],
    },
    handleGoBack: {
      type: Function,
      default: () => {},
    },
    isProject: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
      form: {
        admin: [],
      },
      list: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "王小虎",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "王小虎",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "王小虎",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "王小虎",
        },
      ],
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  async mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    const res = await listUser({
      pageNum: 1,
      pageSize: 9999,
      status: "0",
      userType: "front_user",
    });
    this.list = res.rows;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(
        document.getElementById("timeChartRef"),
        "macarons"
      );
      this.setOptions(this.chartData);
    },
    setOptions() {
      this.chart.setOption({
        title: {
          text: `实际总工时：${5}`,
          left: 50,
          top: 20,
          textStyle: {
            color: "#333",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["计划工时", "实际工时"],
          top: "20",
          left: "center",
          itemGap: 20,
          itemWidth: 40,
          itemHeight: 14,
          textStyle: {
            color: "#8C8C8C",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "赵克强1",
            "赵克强2",
            "赵克强3",
            "赵克强4",
            "赵克强5",
            "赵克强6",
            "赵克强7",
            "赵克强8",
            "赵克强9",
          ],
          axisLine: {
            lineStyle: {
              color: "#666",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            axisLabel: {
              formatter: "{value}",
            },
            lineStyle: {
              color: "#666",
            },
          },
          axisTick: {
            show: false,
          },
        },
        dataZoom: [
          {
            show: true,
            type: "slider",
            brushSelect: false,
            fillerColor: "#f1f1f1",
            borderColor: "transparent",
            fillerColor: "rgba(167,183,204,0.4)",
            endValue: 7,
            filterMode: "empty",
            width: "60%",
            left: "center",
            bottom: 10, //右边的距离
            zoomLoxk: true,
            xAxisIndex: 0,
            start: 0,
            startValue: 0,
            showDetail: false,
          },
          {
            type: "inside",
            xAxisIndex: 0,
            zoomOnMouseWheel: false, //滚轮是否触发缩放
            moveOnMouseMove: true, //鼠标滚轮触发滚动
            moveOnMouseWheel: true,
          },
        ],
        series: [
          {
            name: "计划工时",
            type: "bar",
            barWidth: 30,
            label: {
              normal: {
                show: false,
                position: "insideRight",
              },
            },
            itemStyle: {
              color: "RGB(5,189,187)",
            },
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "实际工时",
            type: "bar",
            barWidth: 30,
            label: {
              normal: {
                show: false,
                position: "insideRight",
              },
            },
            itemStyle: {
              color: "RGB(51,150,251)",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.timeRecording {
  height: 85vh;
  display: flex;
  background: #f0f2f5;
  .leftSearch {
    width: 280px;
    height: 85vh;
    overflow-y: auto;
    padding: 12px;
    background: #fff;
  }
  .rightChart {
    width: 100%;
    height: 85vh;
    overflow-y: auto;
    margin: 20px;
    ::v-deep .el-table .el-table__header-wrapper th {
      background: RGB(243, 243, 243);
      color: #666;
      font-size: 12px;
      font-weight: 500;
      text-align: center;
    }
    .row {
      display: flex;
      flex-direction: column;
    }
    .chart {
      background: #fff;
      height: 600px;
      box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      .title {
        font-size: 14px;
        border-bottom: 1px solid #f1efef;
        padding: 16px 0 16px 24px;
      }
      .timeChartRef {
        height: 548px;
      }
    }
    .table {
      background: #fff;
      box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      padding-bottom: 30px;
      .title {
        font-size: 14px;
        border-bottom: 1px solid #f1efef;
        padding: 16px 0 16px 24px;
      }
    }
  }
}
</style>